<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
<!-- * * * * * * * * * * * The content below * * * * * * * * * * * -->
<!-- * * * * * * * * * * is only a placeholder * * * * * * * * * * -->
<!-- * * * * * * * * * * and can be replaced.  * * * * * * * * * * -->
<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
<!-- * * * * * * * * * Delete the template below * * * * * * * * * -->
<!-- * * * * * * * to get started with your project! * * * * * * * -->
<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->

<style>
  .list{
    display: grid;
    border: 10px solid red;
    grid-template-columns: repeat(4, 1fr);
  }
  .list .item:first-child{
    grid-row: 1 / 3;
  }
  .list .item:first-child .img img{
    position: absolute;
    bottom: 0;
    right: 0;
  }
  .list .item{
    padding: 20px;
    min-height: 200px;
    position: relative;
    border-bottom: 1px solid black;
    border-right: 1px solid black;
  }
  .list .item .price{
    color: red;
    margin-bottom: 10px;
  }
  .list .item .more-button{
    color: white;
    padding: 5px;
    border-radius: 0 20px 20px 0;
    background-color: red;
  }
  .flex{
    display: flex;
  }
</style>



<main class="main">
  <div class="content">
    <div class="list">
      @for (item of list; let index = $index; track index) {
          <div
            class="item"
            target="_blank"
            rel="noopener"
          >
            <div class="flex">
              <div class="">
                <h2 class="title">{{ item.name }}</h2>
                <div class="price">{{ item.price }}</div>
                <div class="more"  (click)="more(index)"><a class="more-button">进入查看 ></a></div>
              </div>
              <div class="img"><img [src]="item.img"/></div>
            </div>
            
          </div>
        }
    </div>
  </div>

  @for (item of getLastDayOfFebruary(); let index = $index; track index) {
    <div
      class="item"
      target="_blank"
      rel="noopener"
    >
      {{ item }}
      
    </div>
  }
</main>
<router-outlet />
